<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初中生作品展</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Edge浏览器视频控件样式 - 内联样式确保优先级 */
        .video-player video::-ms-media-controls-play-button,
        .videos-container .video-player video::-ms-media-controls-play-button,
        #videos .video-player video::-ms-media-controls-play-button,
        .video-item .video-player video::-ms-media-controls-play-button {
            background: rgba(0, 123, 255, 0.9) !important;
            border-radius: 50% !important;
            color: white !important;
            border: 2px solid white !important;
            width: 40px !important;
            height: 40px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .video-player video::-ms-media-controls-play-button::before,
        .videos-container .video-player video::-ms-media-controls-play-button::before,
        #videos .video-player video::-ms-media-controls-play-button::before,
        .video-item .video-player video::-ms-media-controls-play-button::before {
            content: "▶" !important;
            font-size: 16px !important;
            color: white !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .video-player video::-ms-media-controls-pause-button,
        .videos-container .video-player video::-ms-media-controls-pause-button,
        #videos .video-player video::-ms-media-controls-pause-button,
        .video-item .video-player video::-ms-media-controls-pause-button {
            background: rgba(0, 123, 255, 0.9) !important;
            border-radius: 50% !important;
            color: white !important;
            border: 2px solid white !important;
            width: 40px !important;
            height: 40px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .video-player video::-ms-media-controls-pause-button::before,
        .videos-container .video-player video::-ms-media-controls-pause-button::before,
        #videos .video-player video::-ms-media-controls-pause-button::before,
        .video-item .video-player video::-ms-media-controls-pause-button::before {
            content: "⏸" !important;
            font-size: 16px !important;
            color: white !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .video-player video::-ms-media-controls-button,
        .videos-container .video-player video::-ms-media-controls-button,
        #videos .video-player video::-ms-media-controls-button,
        .video-item .video-player video::-ms-media-controls-button {
            display: block !important;
            position: relative !important;
            z-index: 10 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* 强制显示所有Edge媒体控件 */
        .video-player video::-ms-media-controls,
        .videos-container .video-player video::-ms-media-controls,
        #videos .video-player video::-ms-media-controls,
        .video-item .video-player video::-ms-media-controls {
            background: transparent !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* 确保控件面板可见 */
        .video-player video::-ms-media-controls-panel,
        .videos-container .video-player video::-ms-media-controls-panel,
        #videos .video-player video::-ms-media-controls-panel,
        .video-item .video-player video::-ms-media-controls-panel {
            background: transparent !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    </style>
</head>
<body>
    <!-- 顶栏幻灯片 -->
    <header class="header">
        <div class="slideshow-container">
            <div class="slide fade">
                <img src="images/landscape1.jpg" alt="风景照片1">
                <div class="slide-content">
                    <h1 class="main-title">初中生作品展</h1>
                    <p class="subtitle">展示我们的创意与才华</p>
                </div>
            </div>
            <div class="slide fade">
                <img src="images/landscape2.jpg" alt="风景照片2">
                <div class="slide-content">
                    <h1 class="main-title">初中生作品展</h1>
                    <p class="subtitle">展示我们的创意与才华</p>
                </div>
            </div>
            <div class="slide fade">
                <img src="images/landscape3.jpg" alt="风景照片3">
                <div class="slide-content">
                    <h1 class="main-title">初中生作品展</h1>
                    <p class="subtitle">展示我们的创意与才华</p>
                </div>
            </div>
            
            <!-- 幻灯片控制按钮 -->
            <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
            <a class="next" onclick="changeSlide(1)">&#10095;</a>
        </div>
        
        <!-- 幻灯片指示器 -->
        <div class="dots-container">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </header>

    <!-- 导航菜单 -->
    <nav class="navigation">
        <div class="nav-container">
            <a href="#photos" class="nav-item active" onclick="showSection('photos')">
                <i class="icon">📷</i>
                <span>照片</span>
            </a>
            <a href="#articles" class="nav-item" onclick="showSection('articles')">
                <i class="icon">📝</i>
                <span>文章</span>
            </a>
            <a href="#videos" class="nav-item" onclick="showSection('videos')">
                <i class="icon">🎥</i>
                <span>视频</span>
            </a>
            <a href="#artworks" class="nav-item" onclick="showSection('artworks')">
                <i class="icon">🎨</i>
                <span>美术</span>
            </a>
            <a href="#projects" class="nav-item" onclick="showSection('projects')">
                <i class="icon">🔬</i>
                <span>科技</span>
            </a>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 照片展示区域 -->
        <section id="photos" class="content-section active" style="scroll-margin-top: 80px;">
            <h2 class="section-title">照片作品</h2>
            <div class="gallery">
                <div class="gallery-item" onclick="openPhoto('images/photo1.jpg', '校园春色', '张三', '初二(1)班', '春天的校园里，樱花盛开，绿草如茵，展现了校园的美丽景色。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo1.jpg" alt="校园春色">
                    </div>
                    <div class="item-info">
                        <h3>校园春色</h3>
                        <p>作者：张三</p>
                        <p>班级：初二(1)班</p>
                    </div>
                </div>
                <div class="gallery-item" onclick="openPhoto('images/photo2.jpg', '夕阳西下', '李四', '初二(2)班', '夕阳西下时分，天空被染成金黄色，校园显得格外宁静美丽。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo2.jpg" alt="夕阳西下">
                    </div>
                    <div class="item-info">
                        <h3>夕阳西下</h3>
                        <p>作者：李四</p>
                        <p>班级：初二(2)班</p>
                    </div>
                </div>
                <div class="gallery-item" onclick="openPhoto('images/photo3.jpg', '雨后彩虹', '王五', '初二(3)班', '雨后的天空中出现了美丽的彩虹，为校园增添了一抹绚丽的色彩。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo3.jpg" alt="雨后彩虹">
                    </div>
                    <div class="item-info">
                        <h3>雨后彩虹</h3>
                        <p>作者：王五</p>
                        <p>班级：初二(3)班</p>
                    </div>
                </div>
                <div class="gallery-item" onclick="openPhoto('images/photo1.jpg', '校园春色', '张三', '初二(1)班', '春天的校园里，樱花盛开，绿草如茵，展现了校园的美丽景色。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo1.jpg" alt="校园春色">
                    </div>
                    <div class="item-info">
                        <h3>校园春色</h3>
                        <p>作者：张三</p>
                        <p>班级：初二(1)班</p>
                    </div>
                </div>
                <div class="gallery-item" onclick="openPhoto('images/photo2.jpg', '夕阳西下', '李四', '初二(2)班', '夕阳西下时分，天空被染成金黄色，校园显得格外宁静美丽。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo2.jpg" alt="夕阳西下">
                    </div>
                    <div class="item-info">
                        <h3>夕阳西下</h3>
                        <p>作者：李四</p>
                        <p>班级：初二(2)班</p>
                    </div>
                </div>
                <div class="gallery-item" onclick="openPhoto('images/photo3.jpg', '雨后彩虹', '王五', '初二(3)班', '雨后的天空中出现了美丽的彩虹，为校园增添了一抹绚丽的色彩。')">
                    <div class="photo-thumbnail">
                        <img src="images/photo3.jpg" alt="雨后彩虹">
                    </div>
                    <div class="item-info">
                        <h3>雨后彩虹</h3>
                        <p>作者：王五</p>
                        <p>班级：初二(3)班</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 文章展示区域 -->
        <section id="articles" class="content-section" style="scroll-margin-top: 80px;">
            <h2 class="section-title">文章作品</h2>
            <div class="articles-container">
                <article class="article-item" onclick="openArticle('article_1.html', '我的理想', '赵六', '初二(1)班', '2024-01-15')">
                    <h3>我的理想</h3>
                    <p class="article-meta">作者：赵六 | 班级：初二(1)班 | 发布时间：2024-01-15</p>
                    <p class="article-excerpt">
                        每个人都有自己的理想，我的理想是成为一名优秀的教师。教师是人类灵魂的工程师，
                        他们用知识浇灌学生的心灵，用爱心温暖学生的成长...
                    </p>
                    <div class="read-more">阅读全文</div>
                </article>
                <article class="article-item" onclick="openArticle('article_2.html', '春天的校园', '钱七', '初二(2)班', '2024-01-10')">
                    <h3>春天的校园</h3>
                    <p class="article-meta">作者：钱七 | 班级：初二(2)班 | 发布时间：2024-01-10</p>
                    <p class="article-excerpt">
                        春天来了，校园里的一切都焕发出勃勃生机。樱花盛开，柳絮飞舞，
                        同学们在操场上奔跑嬉戏，构成了一幅美丽的画卷...
                    </p>
                    <div class="read-more">阅读全文</div>
                </article>
            </div>
        </section>

        <!-- 视频展示区域 -->
        <section id="videos" class="content-section" style="scroll-margin-top: 80px;">
            <h2 class="section-title">视频作品</h2>
            <div class="videos-container">
                <div class="video-item" onclick="openVideo('videos/test.mp4', '校园生活记录', '孙八', '初二(1)班', '3:45')">
                    <div class="video-thumbnail">
                        <img src="images/video-thumb1.jpg" alt="校园生活记录">
                    </div>
                    <div class="video-info">
                        <h3>校园生活记录</h3>
                        <p>作者：孙八 | 班级：初二(1)班</p>
                        <p>时长：3:45</p>
                    </div>
                </div>
                <div class="video-item" onclick="openVideo('videos/test2.mp4', '科学实验展示', '周九', '初二(2)班', '5:20')">
                    <div class="video-thumbnail">
                        <img src="images/video-thumb2.jpg" alt="科学实验展示">
                    </div>
                    <div class="video-info">
                        <h3>科学实验展示</h3>
                        <p>作者：周九 | 班级：初二(2)班</p>
                        <p>时长：5:20</p>
                    </div>
                </div>
                <div class="video-item" onclick="openVideo('videos/test4.mp4', '创意作品展示', '李十', '初二(3)班', '2:30')">
                    <div class="video-thumbnail">
                        <img src="images/video-thumb1.jpg" alt="创意作品展示">
                    </div>
                    <div class="video-info">
                        <h3>创意作品展示</h3>
                        <p>作者：李十 | 班级：初二(3)班</p>
                        <p>时长：2:30</p>
                    </div>
                </div>
                <div class="video-item" onclick="openVideo('videos/car3.mp4', '科技项目演示', '王十一', '初二(1)班', '4:15')">
                    <div class="video-thumbnail">
                        <img src="images/video-thumb1.jpg" alt="科技项目演示">
                    </div>
                    <div class="video-info">
                        <h3>科技项目演示</h3>
                        <p>作者：王十一 | 班级：初二(1)班</p>
                        <p>时长：4:15</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 美术作品展示区域 -->
        <section id="artworks" class="content-section" style="scroll-margin-top: 80px;">
            <h2 class="section-title">美术作品</h2>
            <div class="artworks-container">
                <div class="artwork-item">
                    <img src="images/artwork1.jpg" alt="美术作品1">
                    <div class="artwork-info">
                        <h3>水彩画：春天的花</h3>
                        <p>作者：吴十 | 班级：初二(1)班</p>
                        <p>技法：水彩画</p>
                    </div>
                </div>
                <div class="artwork-item">
                    <img src="images/artwork2.jpg" alt="美术作品2">
                    <div class="artwork-info">
                        <h3>素描：静物写生</h3>
                        <p>作者：郑十一 | 班级：初二(2)班</p>
                        <p>技法：素描</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 科技项目展示区域 -->
        <section id="projects" class="content-section" style="scroll-margin-top: 80px;">
            <h2 class="section-title">科技项目</h2>
            <div class="projects-container">
                <div class="project-item" onclick="openProject('project_1.html', '智能垃圾分类系统', '王十二', '初二(1)班')">
                    <div class="project-image">
                        <img src="images/project1.jpg" alt="科技项目1">
                    </div>
                    <div class="project-info">
                        <h3>智能垃圾分类系统</h3>
                        <p>作者：王十二 | 班级：初二(1)班</p>
                        <p>项目简介：利用Arduino和传感器制作的智能垃圾分类系统，
                        能够自动识别垃圾类型并进行分类。</p>
                        <div class="project-tags">
                            <span class="tag">Arduino</span>
                            <span class="tag">传感器</span>
                            <span class="tag">环保</span>
                        </div>
                    </div>
                </div>
                <div class="project-item" onclick="openProject('project_2.html', '太阳能充电器', '李十三', '初二(2)班')">
                    <div class="project-image">
                        <img src="images/project2.jpg" alt="科技项目2">
                    </div>
                    <div class="project-info">
                        <h3>太阳能充电器</h3>
                        <p>作者：李十三 | 班级：初二(2)班</p>
                        <p>项目简介：利用太阳能板制作的便携式充电器，
                        可以为手机等电子设备充电。</p>
                        <div class="project-tags">
                            <span class="tag">太阳能</span>
                            <span class="tag">充电器</span>
                            <span class="tag">绿色能源</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 某某中学作品展 - 展示学生创意与才华的平台</p>
            <p>地址：某某市某某区某某路123号 | 电话：123-456-7890</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
